<template>
  <el-cascader
    class="width-100" :value="internalValue" :options="options"
    :props="defaultProps" @change="onChange" v-bind="$attrs"
  ></el-cascader>
</template>

<script>
import { queryMeasuringToolsTypeList } from '@/api/measuringToolsType'

export default {
  inheritAttrs: false,
  name: 'measure-tools-type-picker',
  props: {
    value: String,
  },
  data () {
    return {
      internalValue: this.value,
      options: [],
      defaultProps: {
        value: 'code',
        label: 'name',
        leaf: 'isLeaf'
      },
    }
  },
  watch: {
    value (val) {
      this.internalValue = val
    }
  },
  mounted () {
    this.getOptions()
  },
  methods: {
    onChange (item) {
      this.$emit('input', item ? item[item.length - 1] : '')
      this.$emit('change', item || '')
    },
    getOptions () {
      return queryMeasuringToolsTypeList().then(res => {
        if (res.code === 200) {
          res.data.forEach(v => {
            v.isLeaf = !(v.children && v.children.length > 0)
          })
          this.options = res.data
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
